<script setup lang="ts">
import { ArrowRightBold } from '@element-plus/icons-vue'

const $router = useRouter()

function handleJumpView(name: string) {
    $router.push({
        name
    })
}

</script>

<template>
    <div class="cooperation-nav">
        <div class="cooperation-upload-nav-item" @click="handleJumpView('Entry')">
            <div class="text">入职心安元素</div>
            <el-icon size="14" class="icon">
                <ArrowRightBold />
            </el-icon>
        </div>
        <div class="cooperation-upload-nav-item" @click="handleJumpView('Cooperation')">
            <div class="text">合作伙伴</div>
            <el-icon size="14" class="icon">
                <ArrowRightBold />
            </el-icon>
        </div>
        <div class="cooperation-upload-nav-item" @click="handleJumpView('Service')">
            <div class="text">在线客服</div>
            <el-icon size="14" class="icon">
                <ArrowRightBold />
            </el-icon>
        </div>
        <div class="cooperation-upload-nav-item" @click="handleJumpView('Help')">
            <div class="text">帮助中心</div>
            <el-icon size="14" class="icon">
                <ArrowRightBold />
            </el-icon>
        </div>
        <div class="cooperation-upload-nav-item" @click="handleJumpView('Feedback')">
            <div class="text">意见反馈</div>
            <el-icon size="14" class="icon">
                <ArrowRightBold />
            </el-icon>
        </div>
    </div>
</template>

<style lang="less" scoped>
.cooperation-nav {
    width: 250px;
    height: 230px;
    border: 1px solid rgba(187, 187, 187, 1);
    padding-bottom: 40px;

    .cooperation-upload-nav-item {
        width: 250px;
        height: 40px;
        line-height: 23px;
        color: rgba(16, 16, 16, 1);
        font-size: 16px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: all .2s;
        cursor: pointer;

        .icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        &:hover {
            background-color: red;
            color: #ffffff;
        }
    }
}
</style>
